<template>
	<view class="container bg-white">			
		<!--广告位-->
		<cc-swiper :info="topBanner" v-if="topBanner.list.length > 0"></cc-swiper>
		<view class="box-bg" style="background-color: transparent;">
			<uni-nav-bar :border="false" :statusBar="true" backgroundColor="transparent">
				<block slot="left">
					<uni-icons type="back" color="#fff" size="18" @click="goPage('back')" />
				</block>
			</uni-nav-bar>
		</view>
		
		<view class="house_price">
			
			<!-- 装修报价 -->
			<view class="house_price_old_new uni-flex justify-space-between m-t30">
				<view :class="'house_price_item '+(form.old_new == 'old' ? 'house_price_active' : '')" @click="form.old_new = 'old'">老房</view>
				<view :class="'house_price_item '+(form.old_new == 'new' ? 'house_price_active' : '')" @click="form.old_new = 'new'">新房</view>
			</view>
			<view class="fs10 text-gray9 m-t10 m-b20">* 新房 = 毛坯房，不含拆除</view>
			<view class="price_item uni-flex justify-space-between fs14 border-b1 m-b20">
				<view class="">所在城市</view>
				<uni-data-picker placeholder="请选择城市" popup-title="请选择城市" :localdata="cityList" :clearIcon="false" v-model="form.city_code">
				</uni-data-picker>
			</view>
			<view class="price_item uni-flex justify-space-between fs14 border-b1 m-b20">
				<view class="">建筑面积</view>
				<input class="price_item_input" type="number" placeholder="请输入房屋建筑面积(㎡)" v-model="form.area" />
			</view>
			<view class="price_item uni-flex justify-space-between fs14 border-b1 m-b20">
				<view class="">我家户型</view>
				<uni-data-picker placeholder="请选择户型" popup-title="请选择户型" :localdata="typeList" :clearIcon="false" v-model="form.type_code">
				</uni-data-picker>
			</view>
			<view class="price_item uni-flex justify-space-between fs14 border-b1 m-b20">
				<view class="">选择风格</view>
				<uni-data-picker placeholder="请选择户型" popup-title="请选择户型" :localdata="styleList" :clearIcon="false" v-model="form.style_code">
				</uni-data-picker>
			</view>
			<view class="price_item uni-flex justify-space-between fs14 border-b1 m-b20">
				<view class="">您的姓名</view>
				<input class="price_item_input" v-model="form.cname" type="text" placeholder="请输入您的姓名" />
			</view>
			<view class="price_item uni-flex justify-space-between fs14 border-b1">
				<view class="">联系方式</view>
				<input class="price_item_input" v-model="form.phone" type="number" maxlength="11" placeholder="请输入手机号码" />
			</view>
			<button class="text-blue w-100 text-right usePhone" type="default" open-type="getPhoneNumber" @getphonenumber="getPhone">
				使用本机号码
			</button>
			<view class="house_price_item1 house_price_btn" @click="getPrice">
				计算报价
			</view>
			<view class="fs10 text-gray9 m-t10 m-b20">*装修顾问将致电为您解读报价</view>
			
		</view>
		
		<!--广告位-->
		<cc-swiper :info="bottomBanner" v-if="bottomBanner.list.length > 0"></cc-swiper>
		
		
		<!-- 提示 -->
		<prompt :content="prompt" :show="prompt.show" @confirm="prompt.show = false"></prompt>
		
		<common-footer></common-footer>
	</view>
</template>
<script>
import { getAd, getAddressByLocation } from "@/api/base.js"
import { cityList, typeList, styleList, housePrice, housePriceSave } from "@/api/house.js"

import request from '@/common/request.js'
let that;
export default {
	data() {
		return {
			topBanner: {	//顶部广告
				list: [],
				imgWidth: "100%",
				imgHeight: "280px",
				field: "title"
			},
			bottomBanner: {	//底部广告
				list: [],
				imgWidth: "100%",
				imgHeight: "100px",
				field: "title"
			},
			
			cityList: [],
			typeList: [],
			styleList: [],
			
			form: {
				phone: '',
				city_code: '',
				type_code: '',
				style_code: '',
				area: '',
				old_new: 'old',
				cname: ''
			},
			
			prompt: {	//提示
				show: false,
				title: "",
				content: "",
				button: ""
			},
			
		}
	},
	onLoad(e){
		that = this
		that.getAdList()
		that.getCityList()
		that.getTypeList()
		that.getStyleList()
		that.getLocation()
	},
	methods: {		
		/**
		 * 获取报价
		 */
		getPrice(){			
			let token = uni.getStorageSync("token")
			if(!token) {			
				uni.redirectTo({
					url: "/pages/user/login"
				})
				return
			}
			if(that.form.area == '' || parseInt(that.form.area) <= 0) {
				uni.showToast({ title: "请输入房屋面积", icon: 'none' });				
				return
			}
			if(that.form.phone == '') {
				uni.showToast({ title: "请输入手机号", icon: 'none' });				
				return
			}
			housePrice(that.form).then(res => {				
				let saveData = {
					old_new: that.form.old_new,
					type_code: that.form.type_code,
					style_code: that.form.style_code,
					city_code: that.form.city_code,
					area: that.form.area,
					price: res.data,
					cname: that.form.cname,
					ctel: that.form.phone
				}
				housePriceSave(saveData).then((res1) => {
					that.prompt = {
						title: "您的装修报价为：",
						content: `￥${res.data}`,
						button: '我知道了',
						show: true
					}
				})
			})
		},
		/**
		 * 获取位置
		 */
		getLocation() {
			getAddressByLocation().then(res => {
				if(res) {
					let city = that.cityList.find(e => e.text == res.city)
					that.form.city_code = city && city!=undefined ? city.value : that.cityList[0]['value']
				}
			})
		},
		/**
		 * 广告
		 */
		getAdList(){
			getAd({
				order: "sort asc",
				condition: {
					state: 1,
					position_code: "quotationTop",
				}				
			}).then(res => {
				that.topBanner.list = res.data
			})
			getAd({
				order: "sort asc",
				condition: {
					state: 1,
					position_code: "quotationBottom",
				}				
			}).then(res => {
				that.bottomBanner.list = res.data
			})
		},
		getCityList(){
			cityList({
				order: "sort asc",
				condition: {
					state: 1
				}		
			}).then(res => {
				that.form.city_code = res.data[0]['code']
				res.data.forEach(res => {
					that.cityList.push({
						text: res.title,
						value: res.code
					})
				})
			})
		},
		getTypeList(){
			typeList({
				order: "sort asc",
				condition: {
					state: 1
				}		
			}).then(res => {
				res.data.forEach(res => {
					that.typeList.push({
						text: res.title,
						value: res.code
					})
				})
			})
		},
		getStyleList(){
			styleList({
				order: "sort asc",
				condition: {
					state: 1
				}		
			}).then(res => {
				res.data.forEach(res => {
					that.styleList.push({
						text: res.title,
						value: res.code
					})
				})
			})
		},
		// 使用本机号码
		getPhone(result) {
			request({
				url: "api/weminiPhone",
				method: "POST",
				data: {
					code: result.detail.code,
					from: "weminicut"
				}
			}).then(res => {
				if(res.code == 0 && res.data && res.data.errcode == 0) {
					that.form.phone = res.data.phone_info.purePhoneNumber
				}
			})	
		},
		goPage(type){
			if(type == 'back') {
				uni.navigateBack(-1)
			}
		}
	}
}
</script>
<style>
.house_price {
	border-radius: 20px 20px 0 0;
	background-color: #fff;
	margin-top: -20px;
	position: relative;
	z-index: 2; 
}
.usePhone , .usePhone::after {
	border: none;
	background: transparent !important;
	font-size: 12px;
	color: #007AFF !important;
	line-height: 25px;
	padding: 0;
}
.price_item {
	line-height: 35px;
}
.input-value-border {
	border: none !important;
}
.price_item_input {
	text-align: right;
	width: 70%;
	height: 35px;
	line-height: 35px;
	font-size: 12px;
	padding: 0;
}
.house_price_btn {
	background-color: #007AFF;
	color: #fff;
	width: 100%;
	margin-top: 15px;
}
.uni-data-tree-dialog  {
	height: 400px !important;
	top: initial !important;
}
</style>